<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>孵化群分组</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 页面主体样式 */
        body {
            padding: 15px;
            max-width: 600px; /* 限制最大宽度，优化阅读体验 */
            margin: 0 auto;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        /* 容器布局 - 使用flex实现垂直排列 */
        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        /* 文本输入框样式 */
        textarea {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        /* 开关容器样式 */
        .switch-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        /* 开关按钮样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        /* 隐藏原始复选框 */
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        /* 自定义滑块样式 */
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        /* 滑块圆形按钮 */
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        /* 开关选中状态样式 */
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        /* 按钮通用样式 */
        button {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #1976D2;
        }
        /* 结果区域样式 */
        #result {
            margin-top: 20px;
        }
        /* 分组样式 */
        .group {
            margin: 10px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        /* 复制按钮样式 */
        .copy-button {
            background-color: #4CAF50;
            margin-bottom: 10px;
        }
        .copy-button:hover {
            background-color: #45a049;
        }
        /* 统计信息样式 */
        .stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 10px;
        }
        .stats span {
            color: #666;
            font-size: 14px;
        }
        .number-input {
            width: 60px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="container">
        <!-- 文本输入区域 -->
        <textarea id="inputText" placeholder="请输入接龙数据..."></textarea>
        <!-- 排序开关 -->
        <div class="switch-container">
            <span>每组人数上限：</span>
            <input type="number" id="maxGroupSize" class="number-input" value="10" min="2" max="20">
            <span>组长序号：</span>
            <input type="number" id="leaderNumber" class="number-input" value="5" min="0" max="9">
            <div style="display: none;">
                <label class="switch">
                    <input type="checkbox" id="sortToggle">
                    <span class="slider"></span>
                </label>
                <span>算法排序</span>
            </div>
        </div>
        <!-- 提交按钮 -->
        <button onclick="processData()">提交</button>
        <!-- 结果显示区域 -->
        <div id="result">
            <div class="stats">
                <button class="copy-button" onclick="copyResults()" style="display: none;">复制全部结果</button>
                <span id="totalStats"></span>
            </div>
            <div id="groupResults"></div>
        </div>
    </div>

    <script>
        /**
         * 处理输入数据并显示结果
         */
        // 在 statsDiv 显示部分添加两个按钮
        function processData() {
            const text = document.getElementById('inputText').value;
            if (!text) {
                alert('请输入数据');
                return;
            }
            // 按行分割并过滤空行
            const lines = text.split('\n').filter(line => line.trim());
            
            // 筛选出带编号的行（格式如：1.xxx）
            const numberedLines = lines.filter(line => /^\d+\./.test(line.trim()));
            // 筛选出请假的人员
            const absentLines = numberedLines.filter(line => line.includes('请假'));
            // 筛选出实到人员（不包含请假）
            const validData = numberedLines.filter(line => !line.includes('请假'));
            
            // 更新统计信息显示
            const statsDiv = document.getElementById('totalStats');
            statsDiv.innerHTML = `
                总人数: ${numberedLines.length} | 
                <a href="javascript:void(0)" onclick='showMembers("请假", ${JSON.stringify(absentLines).replace(/'/g, "&apos;")})'>请假: ${absentLines.length}</a> | 
                <a href="javascript:void(0)" onclick='showMembers("实到", ${JSON.stringify(validData).replace(/'/g, "&apos;")})'>实到: ${validData.length}</a>
            `;
            
            // 将实到人员分组
            const groups = divideIntoGroups(validData);
            
            // 显示分组结果
            displayResults(groups);
            document.querySelector('.copy-button').style.display = 'block';
        }

        /**
         * 将数据分组
         * @param {Array} data - 待分组的数据数组
         * @returns {Array} - 分组后的二维数组
         */
        function divideIntoGroups(data) {
            const totalCount = data.length;
            const maxGroupSize = parseInt(document.getElementById('maxGroupSize').value) || 10;
            console.log(maxGroupSize);
            // 计算最少需要多少组（向上取整）
            let groupCount = Math.ceil(totalCount / maxGroupSize);
            console.log(groupCount);
            
            // 确保至少分1组
            groupCount = Math.max(1, groupCount);
            
            // 创建空分组数组
            const groups = Array(groupCount).fill().map(() => []);
            
            // 计算每组基础人数和余数
            const baseSize = Math.floor(totalCount / groupCount);
            const remainder = totalCount % groupCount;
            
            // 分配人员到各组
            let currentIndex = 0;
            for (let i = 0; i < groupCount; i++) {
                // 如果有余数，前几组多分配一人
                const groupSize = i < remainder ? baseSize + 1 : baseSize;
                for (let j = 0; j < groupSize; j++) {
                    groups[i].push(data[currentIndex]);
                    currentIndex++;
                }
            }
        
            return groups;
        }

        /**
         * 显示分组结果
         * @param {Array} groups - 分组后的数据
         */
        function displayResults(groups) {
            const resultDiv = document.getElementById('groupResults');
            const copyButton = document.querySelector('.copy-button');
            resultDiv.innerHTML = '';
            copyButton.style.display = 'block';

            let fullResult = '';
            groups.forEach((group, index) => {
                const groupDiv = document.createElement('div');
                groupDiv.className = 'group';
                
                // 修改组长选择逻辑，使用用户设置的数字
                const leaderNumber = document.getElementById('leaderNumber').value;
                const leader = group.find(member => {
                    const number = member.match(/\d+\./);
                    return number && number[0].includes(leaderNumber);
                }) || group[0];

                // 生成文本格式结果（用于复制）
                const groupText = `第${index + 1}组 (${group.length}人)
组长: ${leader}
组员: 
${group.join('\n')}`;
                fullResult += groupText + '\n\n';

                // 生成HTML格式结果（用于显示）
                const html = `
                    <h3>第${index + 1}组 (${group.length}人)</h3>
                    <p>组长: ${leader}</p>
                    <p>组员: ${group.join('<br>')}</p>
                `;
                
                groupDiv.innerHTML = html;
                resultDiv.appendChild(groupDiv);
            });

            // 存储完整结果用于复制功能
            resultDiv.setAttribute('data-full-result', fullResult);
        }

        /**
         * 复制结果到剪贴板
         */
        function copyResults() {
            const resultDiv = document.getElementById('groupResults');
            const fullResult = resultDiv.getAttribute('data-full-result');
            
            // 使用剪贴板API复制文本
            navigator.clipboard.writeText(fullResult).then(() => {
                alert('复制成功！');
            }).catch(err => {
                console.error('复制失败:', err);
                alert('复制失败，请手动复制');
            });
        }

        // 添加显示成员列表的函数
        function showMembers(type, members) {
            const memberList = members.join('\n');
            const result = `${type}人员名单：\n${memberList}`;
            
            if (confirm(`${result}\n\n是否复制到剪贴板？`)) {
                navigator.clipboard.writeText(memberList).then(() => {
                    alert('复制成功！');
                }).catch(err => {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制');
                });
            }
        }
    </script>
</body>
</html>